<template>
	<view class="fui-wrap" v-if="merchant">
		<view class="card">
			<fui-text :text="merch_type_txt[merchant.settle_type].balance" color="white" size="32"></fui-text>
			<merch-balance color="#ffffff" :size="40" :balance="parseNumber(merchant.balance)" :settle_type="merchant.settle_type"></merch-balance>
		</view>
		<view class="line">
			<fui-text :text="merch_type_txt[merchant.settle_type].tips" color="black" size="28" fontWeight="800"></fui-text>
		</view>
		<view class="line">
			<block v-if="merchant.settle_type=='before'">
			<fui-text text="1、商户账户为先充值，车辆离场时扣除相应金额。" color="gray" size="24" block></fui-text>
			<view style="height: 20rpx;"></view>
			<fui-text :text="`2、账户最多可以欠费${merchant.allow_arrears}元，超出将不能再发放停车券。`" color="gray" size="24" block></fui-text>
			</block>
			<block v-if="merchant.settle_type=='after'">
			<fui-text text="1、商户账单为先使用，后结算。" color="gray" size="24" block></fui-text>
			<view style="height: 20rpx;"></view>
			<fui-text :text="`2、账单上限金额为${merchant.allow_arrears}元，超出将不能再发放停车券。`" color="gray" size="24" block></fui-text>
			</block>
			<block v-if="merchant.settle_type=='time'">
			<fui-text :text="`1、商户账户需要预先充值并按时间结算，单价为￥${merchant.price}/小时，车辆离场时扣除相应时间。`" color="gray" size="24" block></fui-text>
			<view style="height: 20rpx;"></view>
			<fui-text text="2、账户禁止欠费，当时间余额为0时超出将不能再发放停车券。" color="gray" size="24" block></fui-text>
			</block>
			<view style="height: 20rpx;"></view>
			<fui-text text="3、享受折扣的商户，充值后会根据折扣增加相应的余额。" color="gray" size="24" block></fui-text>
		</view>
		<view class="line">
			<fui-text :text="merch_type_txt[merchant.settle_type].money" color="black" size="28" fontWeight="800"></fui-text>
		</view>
		<view class="line box" v-if="merchant.settle_type=='before'">
			<view :class="['one',money==100?'active':'']" @click="money=100" style="margin-bottom: 20rpx;">100</view>
			<view :class="['one',money==200?'active':'']" @click="money=200" style="margin-bottom: 20rpx;">200</view>
			<view :class="['one',money==500?'active':'']" @click="money=500" style="margin-bottom: 20rpx;">500</view>
			<view :class="['one',money==1000?'active':'']" @click="money=1000">1000</view>
			<view :class="['one',money==2000?'active':'']" @click="money=2000">2000</view>
			<view :class="['one',money==5000?'active':'']" @click="money=5000">5000</view>
		</view>
		<view class="line">
			<fui-input :readonly="merchant.settle_type=='after'" v-model="money" :inputBorder="true" placeholder="输入自定义充值金额">元</fui-input>
			<view style="height: 20rpx;"></view>
			<fui-text v-if="merchant.settle_type=='time' && money" :text="`折合充值时间为：${Math.floor(money/merchant.price)*60}分钟`" color="green" size="28" block></fui-text>
		</view>
		<view class="line">
			<fui-text text="支付方式" color="black" size="28" fontWeight="800"></fui-text>
		</view>
		<view class="line box" @click="pay_type='wechat'">
			<view class="box" style="margin-right: 50rpx;">
				<fui-icon name="wechat" color="#10d54f"></fui-icon>
				<fui-text text="微信支付" color="black" size="28"></fui-text>
			</view>
			<fui-icon v-if="pay_type=='wechat'" name="check" color="#dc1010" size="48"></fui-icon>
		</view>
		<view class="line box" @click="pay_type='alipay'" v-if="platform=='PC'">
			<view class="box" style="margin-right: 50rpx;">
				<fui-icon name="alipay" color="#1dc6d5"></fui-icon>
				<fui-text text="支付宝支付" color="black" size="28"></fui-text>
			</view>
			<fui-icon v-if="pay_type=='alipay'" name="check" color="#dc1010" size="48"></fui-icon>
		</view>
		<view class="line" style="margin-top: 60rpx;">
			<fui-button @click="recharge">{{merch_type_txt[merchant.settle_type].button}}</fui-button>
		</view>
		<fui-modal :buttons="[]" width="600" :zIndex="9999" :show="payshow" :maskClosable="true" @cancel="payshow=false;disabledButton=false;">
			<view style="padding: 20rpx 0;text-align: center;" v-if="payshow">
				<fui-icon name="comment-fill" :size="108" color="#09BE4F"></fui-icon>
				<view style="margin-bottom: 20rpx;">
					<text class="fui-title">温馨提示：</text>
					<text class="fui-descr">支付订单提交成功！</text>
				</view>
				<sqb-pay :sign="paydata.sign" 
					:notify_url="paydata.notify_url" 
					:subject="paydata.subject" 
					:return_url="paydata.return_url" 
					:total_amount="paydata.total_amount" 
					:terminal_sn="paydata.terminal_sn" 
					:client_sn="paydata.client_sn" 
					@navigateTo="gopayUrl"
				>
					<button style="line-height:70rpx;height:70rpx;width: 440rpx;margin-top: 10rpx;background-color: #43afe8;color: #fff;">立即付款</button>
				</sqb-pay>
			</view>
		</fui-modal>
		<pcfooter></pcfooter>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {formatDuration,parseNumber} from '@/utils/util.js';
	import merchBalance from '@/components/common/merch-balance.vue';
	import pcfooter from '@/components/common/pcfooter.vue';
	export default {
		components:{
			merchBalance:merchBalance,
			pcfooter:pcfooter
		},
		data() {
			return {
				merch_type_txt:{
					before:{
						balance:'账户余额：',
						tips:'账户说明',
						money:'充值金额',
						button:'立即充值'
					},
					after:{
						balance:'账单总额：',
						tips:'账单说明',
						money:'支付金额',
						button:'立即支付'
					},
					time:{
						balance:'账户余额：',
						tips:'账户说明',
						money:'充值金额',
						button:'立即充值'
					}
				},
				money:'',
				merchant:'',
				pay_type:'wechat',
				platform:'',
				payshow:false,
				paydata:''
			}
		},
		onLoad(e) {
			this.$platform();
			this.getMerchInfo();
		},	
		methods: {
			...methods,
			formatDuration,
			parseNumber,
			gopayUrl:function(e){
				uni.redirectTo({
				    url: e.detail.url,
				    fail(e) {
				        uni.showToast({
				          title: "支付失败"
				        });
				    }
				});
			},
			getMerchInfo:function(){
				this.$get('merchant/index/info','',true).then(res=>{
					this.merchant=res.merchant;
					if(this.merchant.settle_type=='after'){
						this.money=-this.merchant.balance;
					}
				});
			},
			recharge:function(){
				let pay_platform;
				let that=this;
				if(that.platform=='MP-WEIXIN'){
					pay_platform='wechat-miniapp';
				}
				if(that.platform=='H5-WEIXIN'){
					pay_platform='wechat-mpapp';
				}
				if(that.platform=='PC' && that.pay_platform=='wechat'){
					pay_platform='wechat-pc';
				}
				if(that.platform=='PC' && that.pay_platform=='alipay'){
					pay_platform='alipay-pc';
				}
				if(!pay_platform){
					this.$msg('请使用微信或支付宝扫码');
					return;
				}
				that.$post('merchant/bill/recharge',{money:that.money,pay_platform:pay_platform},true,true).then(res=>{
					if(res.payType=='shouqianba'){
						this.paydata=res.data;
						this.payshow=true;
						return;
					}
					if(that.platform=='MP-WEIXIN'){
						wx.requestPayment({
							...res.payInfo,
							success:function(){
								that.money='';
								that.getMerchInfo();
								that.$msg('支付成功');
							},
							fail:function(){
								that.$msg('支付失败');
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap{
	padding: 20rpx 40rpx;
	background-color: #fff;
}
.card{
	background:linear-gradient(to right, #8272ff, #ca7bdf);
	height: 180rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 50rpx;
	border-radius: 8rpx;
}
.line{
	margin-top: 30rpx;
}
.box{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	.one{
		border-radius: 8rpx;
		height: 80rpx;
		width: 30%;
		border: 1px solid #e8e8e8;
		text-align: center;
		line-height: 80rpx;
		color: #000;
	}
	.active{
		border: 1px solid #8272ff;
		color: #8272ff;
	}
}
</style>